import React, {useState} from 'react';
import {formatCurrency, formatYears} from '../utils/chartUtils.jsx';

/**
 * 结果显示组件
 * @param {Object} props - 组件属性
 * @param {Object} props.results - 结果数据
 * @param {Object} props.params - 计算参数
 * @returns {JSX.Element}
 */
const ResultDisplay = ({results, params}) => {
    const [hoveredItem, setHoveredItem] = useState(null);

    const getFormulaExplanation = (type) => {
        const {
            employmentType,
            currentSalary,
            localAverageSalary,
            contributionYears,
            retirementAge,
            baseRate
        } = params;

        const payoutMonths = retirementAge === 60 ? 139 : (retirementAge === 55 ? 170 : 195);

        switch (type) {
            case 'monthlyPension':
                return `
          <p>月基本养老金 = 基础养老金 + 个人账户养老金</p>
          <p>${formatCurrency(results.monthlyPension)} = ${formatCurrency(results.basicPension)} + ${formatCurrency(results.personalAccountPension)}</p>
        `;

            case 'basicPension':
                return `
          <p>基础养老金 = (当地上年度在岗职工月平均工资+本人指数化月平均缴费工资)÷2×缴费年限×1%</p>
          <p>${formatCurrency(results.basicPension)} = (${formatCurrency(localAverageSalary)} + ${formatCurrency(results.personalIndexedSalary)}) ÷ 2 × ${contributionYears} × 1%</p>
        `;

            case 'personalAccountPension': {
                let personalAccountTotal;
                if (employmentType === 'employee') {
                    personalAccountTotal = currentSalary * 0.08 * 12 * contributionYears;
                } else {
                    personalAccountTotal = localAverageSalary * baseRate * 0.2 * 12 * contributionYears * (0.08 / 0.2);
                }

                return `
          <p>个人账户养老金 = 个人账户累计存储额 ÷ 计发月数</p>
          <p>${formatCurrency(results.personalAccountPension)} = ${formatCurrency(personalAccountTotal)} ÷ ${payoutMonths}</p>
        `;
            }

            case 'totalContribution':
                if (employmentType === 'employee') {
                    return `
            <p>个人缴费总金额 = 月工资 × 缴费比例 × 12个月 × 缴费年限</p>
            <p>${formatCurrency(results.totalContribution)} = ${formatCurrency(currentSalary)} × 8% × 12 × ${contributionYears}</p>
          `;
                } else {
                    return `
            <p>个人缴费总金额 = 当地平均工资 × 基准比例 × 缴费比例 × 12个月 × 缴费年限</p>
            <p>${formatCurrency(results.totalContribution)} = ${formatCurrency(localAverageSalary)} × ${(baseRate * 100).toFixed(0)}% × 20% × 12 × ${contributionYears}</p>
          `;
                }

            case 'breakEvenPoint':
                return `
          <p>收支平衡点 = 个人缴费总金额 ÷ (月基本养老金 × 12个月)</p>
          <p>${formatYears(results.breakEvenPoint)} = ${formatCurrency(results.totalContribution)} ÷ (${formatCurrency(results.monthlyPension)} × 12)</p>
        `;

            case 'personalIndexedSalary':
                if (employmentType === 'employee') {
                    const contributionIndex = Math.max(0.6, Math.min(3, currentSalary / localAverageSalary));
                    return `
            <p>本人指数化月平均缴费工资 = 当地上年度在岗职工月平均工资 × 本人平均缴费工资指数</p>
            <p>${formatCurrency(results.personalIndexedSalary)} = ${formatCurrency(localAverageSalary)} × ${contributionIndex.toFixed(4)}</p>
            <p>其中：本人平均缴费工资指数 = 当前税前工资 ÷ 当地平均工资 = ${currentSalary} ÷ ${localAverageSalary} = ${(currentSalary / localAverageSalary).toFixed(4)}</p>
            <p>（缴费指数下限为60%，上限为300%）</p>
          `;
                } else {
                    return `
            <p>本人指数化月平均缴费工资 = 当地上年度在岗职工月平均工资 × 所选基准比例</p>
            <p>${formatCurrency(results.personalIndexedSalary)} = ${formatCurrency(localAverageSalary)} × ${(baseRate * 100).toFixed(0)}%</p>
          `;
                }

            default:
                return '';
        }
    };

    return (
        <div className="result-display">
            <h3>计算结果</h3>

            <div
                className="result-item"
                onMouseEnter={() => setHoveredItem('monthlyPension')}
                onMouseLeave={() => setHoveredItem(null)}
            >
                <span className="result-label">月基本养老金：</span>
                <span className="result-value">{formatCurrency(results.monthlyPension || 0)}</span>
                {hoveredItem === 'monthlyPension' && (
                    <div className="calculation-formula"
                         dangerouslySetInnerHTML={{__html: getFormulaExplanation('monthlyPension')}}/>
                )}
            </div>

            <div
                className="result-item"
                onMouseEnter={() => setHoveredItem('totalContribution')}
                onMouseLeave={() => setHoveredItem(null)}
            >
                <span className="result-label">个人缴费总金额：</span>
                <span className="result-value">{formatCurrency(results.totalContribution || 0)}</span>
                {hoveredItem === 'totalContribution' && (
                    <div className="calculation-formula"
                         dangerouslySetInnerHTML={{__html: getFormulaExplanation('totalContribution')}}/>
                )}
            </div>

            {results.personalIndexedSalary !== undefined && (
                <div
                    className="result-item"
                    onMouseEnter={() => setHoveredItem('personalIndexedSalary')}
                    onMouseLeave={() => setHoveredItem(null)}
                >
                    <span className="result-label">本人指数化月平均缴费工资：</span>
                    <span className="result-value">{formatCurrency(results.personalIndexedSalary)}</span>
                    {hoveredItem === 'personalIndexedSalary' && (
                        <div className="calculation-formula"
                             dangerouslySetInnerHTML={{__html: getFormulaExplanation('personalIndexedSalary')}}/>
                    )}
                </div>
            )}

            {results.basicPension !== undefined && (
                <div
                    className="result-item"
                    onMouseEnter={() => setHoveredItem('basicPension')}
                    onMouseLeave={() => setHoveredItem(null)}
                >
                    <span className="result-label">基础养老金：</span>
                    <span className="result-value">{formatCurrency(results.basicPension)}</span>
                    {hoveredItem === 'basicPension' && (
                        <div className="calculation-formula"
                             dangerouslySetInnerHTML={{__html: getFormulaExplanation('basicPension')}}/>
                    )}
                </div>
            )}

            {results.personalAccountPension !== undefined && (
                <div
                    className="result-item"
                    onMouseEnter={() => setHoveredItem('personalAccountPension')}
                    onMouseLeave={() => setHoveredItem(null)}
                >
                    <span className="result-label">个人账户养老金：</span>
                    <span className="result-value">{formatCurrency(results.personalAccountPension)}</span>
                    {hoveredItem === 'personalAccountPension' && (
                        <div className="calculation-formula"
                             dangerouslySetInnerHTML={{__html: getFormulaExplanation('personalAccountPension')}}/>
                    )}
                </div>
            )}

            {results.breakEvenPoint !== undefined && (
                <div
                    className="result-item"
                    onMouseEnter={() => setHoveredItem('breakEvenPoint')}
                    onMouseLeave={() => setHoveredItem(null)}
                >
                    <span className="result-label">收支平衡点：</span>
                    <span className="result-value">{formatYears(results.breakEvenPoint)}</span>
                    {hoveredItem === 'breakEvenPoint' && (
                        <div className="calculation-formula"
                             dangerouslySetInnerHTML={{__html: getFormulaExplanation('breakEvenPoint')}}/>
                    )}
                </div>
            )}
        </div>
    );
};

export default ResultDisplay; 